// 基本信息
import { Applet } from "@/api/interface/iot";
import { getUserAppletList } from "@/api/modules/applet/userApplet";
import { addDictType, modDictType } from "@/api/modules/system/dict";
import DialogBox from "@/components/DialogBox";
import { SYSTEM_ID } from "@/config/config";
import { bizDictType } from "@/utils/cacheUtil";
import { showTips } from "@/utils/util";
import { ElForm } from "element-plus";
import { getCurrentInstance, defineComponent, PropType, ComponentInternalInstance } from "vue";
interface DeviceForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		width: String,
		title: String,
		detail: {
			type: Object as PropType<DeviceForm>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			dictType: [{ required: true, message: proxy?.$t("typedialog.formrule.dicttype"), trigger: "change" }],
			dictName: [{ required: true, message: proxy?.$t("typedialog.formrule.dictname"), trigger: "change" }]
		});
		const validData = () => {
			formRef.value?.validate(async valid => {
				if (valid) {
					let api = props.detail.id ? modDictType : addDictType;
					let { code, message } = await api({ ...props.detail });
					let ok = showTips(code, proxy?.$t("typedialog.tips.dictconfig"), message);
					if (ok) {
						emit("submit");
					}
				}
			});
		};
		onMounted(() => {
			//默认为软产品
			getAppletList();
		});
		const state = reactive({
			type: "",
			appletList: [] as Applet.ResUserApplet[]
		});
		const getAppletList = async () => {
			//默认是三三菜单管理
			state.type = SYSTEM_ID;

			state.appletList = [{ id: SYSTEM_ID, key: SYSTEM_ID, name: "三三物联" }];
			if (state.type == "sansan") {
				let { result } = await getUserAppletList({ pageIndex: 1, pageSize: 99999 });
				result.records = result.records.filter((item: any) => item.appType == "general");
				state.appletList = state.appletList.concat(result.records || []);
			}
		};
		return () => {
			return (
				<DialogBox
					{...attrs}
					width={props.width}
					title={props.title}
					onConfirm={() => {
						validData();
					}}
				>
					<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100px">
						<el-form-item label={proxy?.$t("typedialog.form_label.dictname")} prop="dictName">
							<el-input v-model={props.detail.dictName} placeholder={proxy?.$t("typedialog.placeholder.dictname")} />
						</el-form-item>
						<el-form-item label={proxy?.$t("typedialog.form_label.dicttype")} prop="dictType">
							<el-input
								v-model={props.detail.dictType}
								placeholder={proxy?.$t("typedialog.placeholder.dicttype")}
								disabled={!!props.detail.id}
							/>
						</el-form-item>
						<el-form-item label={proxy?.$t("typedialog.form_label.system")} prop="systemId">
							<el-select v-model={props.detail.systemId} disabled>
								{state.appletList.map((item: any) => {
									return <el-option value={item.id} label={item.name} />;
								})}
							</el-select>
						</el-form-item>
						<el-form-item label={proxy?.$t("typedialog.form_label.biz")} prop="bizId">
							<el-radio-group v-model={props.detail.bizId}>
								<el-radio-button label={bizDictType.public}>{proxy?.$t("typedialog.radio.public")}</el-radio-button>
								<el-radio-button label={bizDictType.variable}>{proxy?.$t("typedialog.radio.variable")}</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item label={proxy?.$t("typedialog.form_label.status")} prop="status">
							<el-radio-group v-model={props.detail.status}>
								<el-radio-button label={1}>{proxy?.$t("typedialog.radio.enable")}</el-radio-button>
								<el-radio-button label={0}>{proxy?.$t("typedialog.radio.disable")}</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item label={proxy?.$t("typedialog.form_label.remark")} prop="remark">
							<el-input v-model={props.detail.remark} type="textarea" />
						</el-form-item>
					</el-form>
				</DialogBox>
			);
		};
	}
});
